<template>
  <view class="page">
    <u-navbar @leftClick="navLeftClick" :fixed="false" title="个人资料" placeholder bgColor="#fff"></u-navbar>
    <view class="user-info">
      <view class="info-item" @click="jumpTo('/pages/userInfo/avatar')">
        <view>头像</view>
        <view class="u-flex avatar">
          <image style="width: 80rpx;height: 80rpx;flex-shrink: 0;" :src="userInfo.avatar" mode="aspectFill" />
        </view>
      </view>
      <view class="info-item" @click="jumpTo('/pages/userInfo/userName')">
        <view>昵称</view>
        <view class="u-flex">
          <text class="u-m-r-20">{{ userInfo.nickName }}</text>
          <u-icon name="arrow-right" color="#000000" size="20rpx"></u-icon>
        </view>
      </view>
      <view class="info-item" @click="jumpTo('/pages/userInfo/userPhone')">
        <view>手机号</view>
        <view class="u-flex">
          <text class="u-m-r-20">{{ userInfo.phonenumber }}</text>
          <u-icon name="arrow-right" color="#000000" size="20rpx"></u-icon>
        </view>
      </view>
      <view class="info-item" @click="jumpTo('/pages/userInfo/userSex')">
        <view>性别</view>
        <view class="u-flex">
          <text class="u-m-r-20">{{ sex[userInfo.sex] }}</text>
          <u-icon name="arrow-right" color="#000000" size="20rpx"></u-icon>
        </view>
      </view>
      <view class="info-item" @click="setOpenId()">
        <view>微信</view>
        <view class="u-flex">
          <text class="u-m-r-20">{{ userInfo.openId ? '已绑定' : '未绑定' }}</text>
          <u-icon name="arrow-right" color="#000000" size="20rpx"></u-icon>
        </view>
      </view>
      <!-- <view class="info-item" @click="showDate()">
        <view>生日</view>
        <view class="u-flex">
          <text class="u-m-r-20">{{ userInfo.birthday }}</text>
          <u-icon name="arrow-right" color="#000000" size="20rpx"></u-icon>
        </view>
      </view> -->
      <!-- <view class="info-item" style="border-bottom: none;" @click="pickerType='region'">
        <view>所在地</view>
        <view class="u-flex">
          <text class="u-m-r-20">{{ form.region }}</text>
          <u-icon name="arrow-right" color="#000000" size="20rpx"></u-icon>
        </view>
      </view> -->
    </view>
    <lingfeng-timepicker ref="timePop" type="date" :defaultData="defaultData" :minDate="minDate" :maxDate="maxDate"  @change="timeChange"></lingfeng-timepicker>
    <u-picker confirmColor="#56CB03" :show="pickerType=='region'" @change="pickerChange" :columns="[cityOptions, cityOptions[pickerIndex1].citys, cityOptions[pickerIndex1].citys[pickerIndex2].areas]" keyName="cityName" @confirm="pickerConfirm" @cancel="pickerType = ''"></u-picker>
  </view>
</template>

<script>
import citys from '@/common/ChinaCitys.json'
import { ENV } from "../../.env.js";
import { isWeChatBrowser } from "@/common/util";
import { getUserInfo, bindOpenId } from '@/api/index'

export default {
  data() {
    return {
      sex: {
        '0': '男',
        '1': '女',
        '2': '保密',
      },
      defaultData:{
        startTime:''
      },
      minDate:{
        year: 0,
        month: 0,
        date: 0
      },
      maxDate:{
        year: 0,
        month: 0,
        date: 0
      },
      cityOptions: citys,
      pickerType: '',
      pickerIndex1: 0,
      pickerIndex2: 0,
      form: {
        region: '北京市-北京市-东城区',
        birthday: '1998-09-01',
      },
      userInfo: {},
      code: '',
    };
  },
  onLoad() {
    const year = new Date().getFullYear()
    this.minDate.year = year - 100
    this.maxDate.year = year
    const month = new Date().getMonth() + 1
    this.minDate.month = 1
    this.maxDate.month = month
    const date = new Date().getDate()
    this.minDate.date = 1
    this.maxDate.date = date

    this.userInfo = uni.getStorageSync('userInfo')

    let url = window.location.href
    if (url.indexOf('code=') !== -1) {
      this.code = url.split('code=')[1].split('&')[0]
    }
  },
  async onShow() {
    if(this.code) {
      uni.showLoading()
      await bindOpenId({ code: this.code, phoneNumber: this.userInfo.phonenumber }).then(async (res) => {
        uni.hideLoading()
        this.code = ''
        getUserInfo({}).then(res => {
          uni.setStorageSync('userInfo', {...res.user, roles: res.roles})
          this.userInfo = {...res.user, roles: res.roles}
          if(this.userInfo.openId) {
            uni.showToast({
              icon: 'none',
              title: `微信绑定成功`
            })
          } else {
            uni.showToast({
              icon: 'none',
              title: `微信绑定失败`
            })
          }
        })
      })
      return
    }
    getUserInfo({}).then(res => {
      uni.setStorageSync('userInfo', {...res.user, roles: res.roles})
      this.userInfo = {...res.user, roles: res.roles}
    })
  },
  methods: {
    setOpenId() {
      // if(this.userInfo.openId) {
      //   uni.showToast({
      //     icon: 'none',
      //     title: `请勿重复绑定微信`
      //   })
      //   return
      // }
      // 判断是否是微信浏览器
      if (isWeChatBrowser()) {
        // 获取微信用户信息
        let url = ''
        if(ENV.BASE_API == '/api') {
          url = this.httpUrl
        } else {
          url = window.location.href
        }
        if (url.indexOf('code=') == -1) {
          const appid = ENV.APP_ID
          let currentURL = encodeURIComponent(url)
          let redirect_uri = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${currentURL}&response_type=code&scope=snsapi_userinfo&forcePopup=true&state=STATE#wechat_redirect`
          window.location.href = redirect_uri
        }
      } else {
        uni.showToast({
          icon: 'none',
          title: `请用微信打开网址`
        })
      }
    },
    pickerChange(e) {
      if(e.columnIndex === 0) {
        this.pickerIndex1 = e.index
      } else if(e.columnIndex === 1) {
        this.pickerIndex2 = e.index
      }
    },
    pickerConfirm(e) {
      if(this.pickerType == 'region') {
        this.form.region = e.value[0].cityName + '-' + e.value[1].cityName + '-' + e.value[2].cityName
      } else {
        this.form.industry = e.value[0].sectorName
      }
      this.pickerType = ''
    },
    showDate(){
      this.defaultData.startTime = this.form.birthday
      this.$refs.timePop.show();
    },
    timeChange(val){
      this.userInfo.birthday = val
    }
  },
};
</script>

<style lang="scss" scoped>
.page {
  width: 750rpx;
  min-height: 100vh;
  background-color: #F5F5F5;
  padding-bottom: 80rpx;
  position: relative;
  .user-info {
    width: 702rpx;
    margin: 0 auto;
    margin-top: 12rpx;
    padding: 2rpx 22rpx 8rpx;
    background: #FFFFFF;
    border-radius: 12rpx;
    .info-item {
      padding: 40rpx 0;
      border-bottom: 2rpx solid #E1E1E1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 28rpx;
      .avatar {
        height: 36rpx;
        position: relative;
        border-radius: 4rpx;
      }
      .avatar::before {
        content: '点击更换';
        position: absolute;
        bottom: -24rpx;
        left: 0;
        width: 100%;
        height: 20rpx;
        line-height: 20rpx;
        text-align: center;
        font-size: 12rpx;
        color: #FFFFFF;
        background: rgba(0,0,0,0.8);
        border-radius: 0rpx 0rpx 4rpx 4rpx;
        z-index: 1;
      }
    }
  }
}
</style>
